import expandRow from './table-expand.vue';
import { ChartPie, ChartBar} from '_c/charts';
import HealthChart from "../../charts/healthChart2";
import {getViolationDayNum, getViolationRecordsSum} from "../../../api/data";
import * as echarts from 'echarts';
export default {
  components: {
    expandRow,
    ChartPie,
    ChartBar,
    HealthChart
  },
  name: "data_statistics",
  data(){
    return{
      queryData: {
        start: '',
        end: '',
        name: '',
        account: '',
        page: '1',
        limit: '10'
      },
      columns10: [
        // {
        //   type: 'expand',
        //   width: 50,
        //   render: (h, params) => {
        //     return h(expandRow, {
        //       props: {
        //         row: params.row
        //       }
        //     })
        //   }
        // },
        {
          title: '账号',
          key: 'account',
          sortable: true,
          fixed: 'left',
          width: 130
        },
        {
          title: '姓名',
          key: 'name',
          sortable: true,
          width: 120
        },
        {
          title: '打电话',
          key: 'phone',
          sortable: true,
          width: 100,
        },
        {
          title: '打哈欠',
          key: 'yawn',
          width: 100,
          sortable: true
        },
        {
          title: '吃东西',
          key: 'eat',
          width: 100,
          sortable: true
        },
        {
          title: '闭眼',
          key: 'shutEye',
          width: 100,
          sortable: true
        },
        {
          title: '抽烟',
          key: 'smoke',
          width: 100,
          sortable: true
        },
        {
          title: '酒驾',
          key: 'drunken',
          width: 100,
          sortable: true
        },
        {
          title: '双手离开方向盘',
          key: 'steeringWheel',
          width: 100,
          sortable: true
        },
        {
          title: '手持异物',
          key: 'handing',
          width: 100,
          sortable: true
        },
        {
          title: '违规总数',
          key: 'sum',
          sortable: true,
          width: 100,
          fixed: 'right'
        },
        {
          title: '驾驶总距离',
          key: 'drivingDistance',
          sortable: true,
          width: 100,
          fixed: 'right'
        },
        {
          title: '每百公里违规数',
          key: 'violationsOf100',
          width: 100,
          fixed: 'right',
          sortable: true
        },
        {
          title: '得分',
          key: 'score',
          sortable: true,
          width: 100,
          fixed: 'right'
        }
      ],
      data9: [  ],
      option : {
        title: {
          text: '违规类型占比分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 0, name: '打电话' },
              { value: 0, name: '抽烟' },
              { value: 0, name: '酒驾' },
              { value: 0, name: '吃东西' },
              { value: 0, name: '双手离开方向盘' },
              { value: 0, name: '手持异物' },
              { value: 0, name: '闭眼' },
              { value: 0, name: '打哈欠' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      pieData: [
        { value: 0, name: '打电话' },
        { value: 0, name: '抽烟' },
        { value: 0, name: '酒驾' },
        { value: 0, name: '吃东西' },
        { value: 0, name: '双手离开方向盘' },
        { value: 0, name: '手持异物' },
        { value: 0, name: '闭眼' },
        { value: 0, name: '打哈欠' }
      ],
      data: [],
      date: [],
      option2 : {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%'];
          }
        },
        title: {
          left: 'center',
          text: '违规行为统计趋势图'
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1968/10/5','1968/10/6']
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%']
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 10
          },
          {
            start: 0,
            end: 10
          }
        ],
        series: [
          {
            name: 'Fake Data',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            itemStyle: {
              color: 'rgb(255, 70, 131)'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 158, 68)'
                },
                {
                  offset: 1,
                  color: 'rgb(255, 70, 131)'
                }
              ])
            },
            data: [12,15]
          }
        ]
      }
    }
  },
  methods: {
    exportData () {
      this.$refs.table.exportCsv({
        filename: 'The original data'
      });
    },
    changePage(pageNumber) {
      this.queryData.page = pageNumber
    },
    changeSize(pageSize) {
      this.queryData.limit = pageSize
    },
    setChartData(){
      this.pieData.forEach(item=>{
        item.value=0;
      })
      let i=0;
      let arr=[1,2,3,4,5,6,9,10]
      this.pieData.forEach(item=>{
        this.data9.forEach(data=>{
          item.value+=data.list[arr[i]]
        })
        i=i+1;
      })
      this.option.series[0].data=this.pieData
      this.initPieChart()
    },
    queryList() {
      getViolationRecordsSum(this.queryData).then(res=>{
        res.data.obj.forEach(item=>{
          item.smoke=item.list[2];
          item.drunken=item.list[3];
          item.eat=item.list[4];
          item.steeringWheel=item.list[5];
          item.handing=item.list[6];
          item.phone=item.list[7];
          item.shutEye=item.list[9];
          item.yawn=item.list[10];
        })
        this.data9=res.data.obj
        this.setChartData()
      }).catch(err=>{
        alert(err.message)
      })

      getViolationDayNum(this.queryData).then(res=>{
        console.log(res.data.obj)
        this.setChartData()
      }).catch(err=>{
        alert(err.message)
      })
    },
    initPieChart(){
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      this.option && myChart.setOption(this.option);
    },
    change() {
      this.option.xAxis.data=this.date
      this.option.series[0].data=this.data
      console.log(this.option.xAxis.data+"/n"+this.option.series.data)
      this.init()
    },
    initLineData(){
      let base = +new Date(1968, 9, 3);
      let oneDay = 24 * 3600 * 1000;
      this.data = [Math.random() * 300];
      for (let i = 1; i < 20; i++) {
        var now = new Date((base += oneDay));
        this.date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'));
        this.data.push(Math.random() * 300);
      }
    },
    initLineChart() {
      var chartDom = document.getElementById('main2');
      var myChart = echarts.init(chartDom);
      this.option2 && myChart.setOption(this.option2);
    },
    reset(){

    },
    loading(){

    },

  },
  mounted() {
    this.initLineData()
    this.initLineChart()
    this.initPieChart()
  }
}
